<template>
    <div class="swiper-add">
      <!-- 最上面标题 -->
      <div class="swiper-title">
        编辑教师
        <el-button
          class="back-btn"
          type="primary"
          @click="toManage"
        >
          <img
            style="width: 16px; height: 16px"
            src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E9%A6%96%E9%A1%B5/u384.png"
            alt=""
          />
          <span style="margin-left: 5px">返回</span>
        </el-button>
      </div>
  
      <div class="main-content">
        <div class="please">请填写教师信息</div>
  
        <!-- 表单区域 -->
        <div>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
          >
            <el-form-item label="教师姓名：" prop="teacherName">
              <el-input
                style="width: 200px"
                v-model="ruleForm.teacherName"
                placeholder="请输入教师姓名"
              />
            </el-form-item>
  
            <el-form-item label="教师头像：" prop="avatarUrl">
              <img :src="ruleForm.avatarUrl" style="width: 120px; height: 120px" />
              <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false">
                <el-icon><Plus /></el-icon>
                
                <template #file="{ file }">
                  <div>
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <el-icon><zoom-in /></el-icon>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <el-icon><Download /></el-icon>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <el-icon><Delete /></el-icon>
                      </span>
                    </span>
                  </div>
                </template>
              </el-upload> -->
  
              <!-- <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </el-dialog> -->
            </el-form-item>
  
            <el-form-item label="简介*：" prop="introduce">
              <el-input style="width: 500px" v-model="ruleForm.introduce" />
            </el-form-item>
            <el-form-item label="内容详情：" prop="description">
              <wangEditor  v-model="ruleForm.description"/>
            </el-form-item>
            <!-- <el-form-item label="上传时间:" required>
              <el-col :span="11">
                <el-form-item prop="uptime">
                  <el-date-picker
                    v-model="ruleForm.uptime"
                    type="date"
                    label="Pick a date"
                    placeholder="请选择上传时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-form-item> -->
  
            <el-form-item label="上传人" prop="uploadPerson">
            <el-input style="width: 200px" v-model="ruleForm.uploadPerson" />
          </el-form-item>
  
            <el-form-item style="display:flex;align-items:center;justify-content: center;">
              <el-button
                class="save-btn"
                type="primary"
                @click="submitForm(ruleFormRef)"
              >
                <img
                  style="width: 16px; height: 16px"
                  src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E6%96%B0%E5%A2%9E%E8%BD%AE%E6%92%AD%E5%9B%BE/u710.png"
                  alt=""
                />
                <span style="margin-left: 5px">保存</span>
              </el-button>
                <el-button
                  class="cancel-btn"
                  type="primary"
                  @click="resetForm(ruleFormRef)"
                >
                  <img
                    style="width: 16px; height: 16px"
                    src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E6%96%B0%E5%A2%9E%E8%BD%AE%E6%92%AD%E5%9B%BE/u713.png"
                    alt=""
                  />
                  <span style="margin-left: 5px">取消</span>
                </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import {useRouter,useRoute} from "vue-router";
  import { reactive, ref,onMounted } from "vue";
  import axios from "../utils/http";
  import wangEditor from "../components/wangEditor.vue";
  import type { FormInstance, FormRules, UploadFile } from "element-plus";
  import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
  import {
    ElButton,
    ElForm,
    ElFormItem,
    ElInput,
    ElCol,
    ElDatePicker,
    ElSwitch,
    ElUpload,
    ElIcon,
    ElDialog,
  } from "element-plus";
  // 正则
  const formSize = ref("default");
  const ruleFormRef = ref<FormInstance>();
  const ruleForm = ref({
    teacherName: "",
    avatarUrl: "",
    uploadPerson: "",
    introduce: "",
    description:"",
    num: 0,
  });
  let msg=ref(1)
  // 正则
  const rules = reactive<FormRules>({
    teacherName: [{ required: true, message: "教师姓名不能为空", trigger: "blur" }],
    avatarUrl: [{ required: true, message: "请上传教师头像", trigger: "blur" }],
    uptime: [
      {
        type: "date",
        required: true,
        message: "请选择一个时间",
        trigger: "change",
      },
    ],
  });
  // 正则
  const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
  }));
  
  // 上传
  const dialogImageUrl = ref("");
  const dialogVisible = ref(false);
  const disabled = ref(false);
  // 上传
  const handleRemove = (file: UploadFile) => {
    console.log(file);
  };
  // 上传
  const handlePictureCardPreview = (file: UploadFile) => {
    dialogImageUrl.value = file.url!;
    dialogVisible.value = true;
  };
  // 上传
  const handleDownload = (file: UploadFile) => {
    console.log(file);
  };
  const route = useRoute();
  let TeacherId=route.query;
  const router=useRouter();
  const toManage=function() {
    router.push({
      name:'StarTeacher'
    })
  }
  let getData = function () {
  axios({
    url: '/StarTeacher/queryById',
    params: {
      id: TeacherId.id,
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      ruleForm.value = data.data
    }
  })
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      axios({
        url: '/StarTeacher/update',
        method: 'put',
        data: ruleForm.value,
      }).then(({ data }) => {
        console.log(data)
        if (data.code == 0) {
          getData()
        }
      })
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
onMounted(() => {
  getData();
});
  </script>
  
  <style lang="less" scoped>
  .swiper-add {
    _min-width: 1095px - 60px;
    _padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  // 上面标题
  .swiper-title {
    font-size: 24px;
    width: 1100px - 50px;
    _padding-right: 50px;
    height: 50px;
    font-weight: bold;
    color: #9137f3;
    display: flex;
    justify-content: space-between;
  }
  .main-content {
    width: 1055px - 60px;
    background-color: white;
    border: 1px solid #e4e4e4;
    //   height: 503px;
    padding: 0 30px;
  
    .please {
      width: 1055px - 60px;
      height: 50px;
      color: #909090;
      font-size: 14px;
      line-height: 50px;
      border-bottom: 1px solid #f2f2f2;
      margin-bottom: 20px;
    }
  }
  .save-btn {
    background-color: #9137f3;
    border: 1px solid #9137f3;
    color: white;
  }
  .cancel-btn {
    background-color: #e4e4e4;
    border: 1px solid #e4e4e4;
    color: #666666;
  }
  .back-btn {
    background-color: #fcfcfc;
    border: 1px solid #9137f3;
    color: #9137f3;
  }
  </style>
  